import path from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// 使用移动端适配
import postcsspxtoviewport from "postcss-px-to-viewport";
// vant的按需引入来减小体积
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
// 使用keep-alive
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
    plugins: [
        vue(),
        Components({
            resolvers: [VantResolver()],
        }),
        VueSetupExtend()
    ],
    server: {
        open: true,
        fs: {
            strict: true,
        },
        host: '0.0.0.0',
        port: 9999,
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, "../src"),
            'vue': 'vue/dist/vue.esm-bundler.js'
        },
        extensions: [".ts", ".js", ".mjs"]
    },
    css: {
        postcss: {
            plugins: [
                postcsspxtoviewport(({ file }) => {
                    // 兼容vant
                    const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;
                    return {
                        plugins: {
                            autoprefixer: {},
                            "postcss-px-to-viewport": {
                                unitToConvert: "px",
                                viewportWidth: designWidth,
                                unitPrecision: 6,
                                propList: ["*"],
                                viewportUnit: "vw",
                                fontViewportUnit: "vw",
                                selectorBlackList: [],
                                minPixelValue: 1,
                                mediaQuery: true,
                                exclude: [/assets/],
                                landscape: false
                            }
                        }
                    }
                })
            ]
        }
    }
})
